<template>
    <!-- 绑定表单验证规则 -->
    <!-- 绑定表单数据模型 -->
    <!-- 设置表单最大宽度 -->
    <!-- 引用表单实例 -->
    <el-form ref="ruleFormRef" style="max-width: 600px" :model="ruleForm" status-icon :rules="rules" label-width="auto"
        class="demo-ruleForm">
        <!-- 密码输入框 -->
        <el-form-item label="Password" prop="pass">
            <el-input v-model="ruleForm.pass" type="password" autocomplete="off" />
        </el-form-item>
        <!-- 确认密码输入框 -->
        <el-form-item label="Confirm" prop="checkPass">
            <el-input v-model="ruleForm.checkPass" type="password" autocomplete="off" />
        </el-form-item>
        <!-- 年龄输入框 -->
        <el-form-item label="Age" prop="age">
            <el-input v-model.number="ruleForm.age" /> <!-- 使用.number修饰符将输入转换为数字 -->
        </el-form-item>
        <!-- 提交和重置按钮 -->
        <el-form-item>
            <el-button type="primary" @click="submitForm(ruleFormRef)">Submit</el-button>
            <el-button @click="resetForm(ruleFormRef)">Reset</el-button>
        </el-form-item>
    </el-form>
</template>

<script setup>
import { reactive, ref } from 'vue';

// 引用表单实例，用于后续操作表单    
const ruleFormRef = ref(null);

// 自定义年龄验证规则    
const checkAge = (rule, value, callback) => {
    // 省略具体实现...    
    callback();
};

// 自定义密码验证规则    
const validatePass = (rule, value, callback) => {
    // 省略具体实现...    
    callback();
};

// 自定义确认密码验证规则    
const validatePass2 = (rule, value, callback) => {
    // 注意：这里应该使用ruleFormRef.value.pass来比较原密码，而不是ruleForm.pass    
    // 因为在validatePass2函数作用域内，ruleForm是未定义的    
    if (value !== ruleFormRef.value.pass) {
        callback(new Error('两次输入的密码不一致!'));
    } else {
        callback();
    }
};

// 表单数据模型    
const ruleForm = reactive({
    pass: '', // 密码    
    checkPass: '', // 确认密码    
    age: '', // 年龄    
});

// 表单验证规则    
const rules = {
    pass: [
        { validator: validatePass, trigger: 'blur' }
    ],
    checkPass: [
        { validator: validatePass2, trigger: 'blur' }
    ],
    age: [
        { validator: checkAge, trigger: 'blur' }
    ]
};

// 提交表单函数    
const submitForm = () => {
    // 省略具体实现...    
};

// 重置表单函数    
const resetForm = () => {
    // 使用ruleFormRef.value来重置表单    
    Object.assign(ruleForm, {
        pass: '',
        checkPass: '',
        age: '',
    });
};    
</script>